<template> 
<div class="app-container">
    <div class="ces-main">
        <v-GetToolBar align="right" :MenuCode="MenuCode"  
        :IsfunEdit='IsfunEdit'
        :Isfunfail='Isfunfail'
        @handeAdd='handeAdd'
        @handleEdit='handleEdit'
        @OpenFindForm='OpenFindForm'
        @handlexportData='handlexportData'
        @IsfunEdit='handleIsfunEdit'
        @Isfunfail='handleIsfunfail'
        @IsfunDelete='handleIsfunfail'
        ></v-GetToolBar>

 <el-form
        :inline="true"
        :model="Search"
        class="demo-form-inline"
        size="mini"
      >
      </el-form>
  

        <!-- <ces-table 
        size='mini'
        :isSelection='false'
        :isIndex='true'
        :isSearch='true'
        :isHandle='false'
        :StepSN = '0'
        :IsfunEdit='IsfunEdit'
         :Isfunfail='Isfunfail'
        :tableData='tableData' 
        :tableCols='tableCols' 
        :Search='Search'
        @refresh="refresh"
        @handleEdit='handleEdit'
        @handleDelete='delData'
        >
        </ces-table> -->


        <ces-table 
        size='mini'
        :isSelection='false'
        :isIndex='true'
        :isSearch='true'
        :isHandle='false'
        :StepSN = '0'
        :IsfunEdit='IsfunEdit'
         :Isfunfail='Isfunfail'
        :tableData='tableData' 
        :tableColumns='tableCols' 
        :Search='Search'
        @refresh="refresh"
        @handleEdit='handleEdit'
        @handleDelete='delData'
        :tableLoading="tableLoading[0]"
        :remark="11"
        :sysID="11"
        >
        </ces-table>

        </div>

 <!--搜索弹框-->
    <el-dialog
      title="搜索"
      :visible.sync="SearchDialog"
      custom-class="dialogClass"
      class="searchDialog"
      center
      ref="searchDialog"
      :modal="false"
      :close-on-click-modal="false"
    >
      <el-form :model="Search" label-width="90px" ref="searchForm">
       
   

      <Search-Form 
        ref="form"   :frame="true"
        size='mini'
        labelWidth = '50px' 
        :searchData = 'Search'
      
         :tableCols = 'tableCols'
        :searchHandle="searchHandle"></Search-Form >
      </el-form>
      
      <div
        slot="footer"
        :style="{ 'margin-buttom': 0 == 0 ? DialogBtnMargin : DialogBtnMargin }"
      >
        <el-button @click="reform()">重置</el-button>
        <el-button type="primary" @click="refresh()">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="800px"
      top="20px"
       
    >
<el-form :model="name" label-width="80px"  label-position="right">
   <el-tabs type="border-card">
        <el-tab-pane label="类别管理">
      <el-form :model="FormData" label-width="90px" ref="MianForm">
       <Mian-Form 
        ref="form"
        :StepSN = '0'
        labelWidth = '100px' 
        :FormData = 'FormData'
         :tableCols = 'tableCols'
        :searchHandle="searchHandle"></Mian-Form >
      </el-form>
        </el-tab-pane>
<div style="float:right ">

 <el-button type="primary" @click="handleOpenClose()">关闭</el-button>
        <el-button type="primary" @click="handleSave()">保存</el-button>

</div>
       
  </el-tabs>
      
</el-form>
     
    </el-dialog>


</div>
</template>

<script>


//引入组件

import cesTable from "../Common//ComSpreadTable.vue";
//import cesTable from "../Common//table.vue";


import SearchForm from "../Common//Search.vue";
import MianForm from "../Common//form.vue";

import { funDownload,GetTableColsData } from "@/api/Common";
import { getDataList,UpdateForm,DeletForm} from '@/api/MesBasic/INDX';
import vGetToolBar from "../Common/GetToolBar";

var _this;
const GCsheets = GC.Spread.Sheets;
import '@grapecity/spread-sheets-vue';
import GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import '@grapecity/spread-sheets/js/zh.js';
GC.Spread.Common.CultureManager.culture('zh-cn');
export default {
  name:"INDX",
    data(){
         //表单查询一般分为input，下拉框，和日期，下面是下拉框时的设置下拉信息的情况，我的项目没有用到，但是留着方便看
      
        return {
        MenuCode: "A050201",
        tableData:[],//表格数据
        FormData:[],//表格数据
        tableCols:[ ],//表格列数据
        searchHandle:[],
        StepSN:"0",
        IsfunEdit:false,
          Isfunfail:false,
        Search: {
        // 查询条件
        total: 0, // 总记录数
        pageSize: 13, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "001", // 表编号  根据Controller中对应的表编号
        jsWhere: "", // 自定义条件
       
      },  tableLoading: [false, false, false, false],
      spread: [[], [], []],
       cities: [
        {
          value: "0",
          label: "草稿",
        },
        {
          value: "1",
          label: "审核中",
        },
        {
          value: "2",
          label: "结案",
        },
        {
          value: "3",
          label: "作废",
        },
      ],
       SearchDialog: false,
         DialogBtnMargin: 0,
         dialogVisible: false,
          
        }
    },

   components:{ //引入组件后注册组件
    cesTable, 
     vGetToolBar,
     SearchForm,
     MianForm
   },
   mounted(){
  
    this.getDataList()
    this.getTableCols()
   },
    methods:{
         //搜索重置
    refresh() {
      this.getDataList();
    },
     reform() {
       this.Search = {
        // 查询条件
        // total: 0, // 总记录数
        pageSize: 13, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "001", // 表编号  根据Controller中对应的表编号
        jsWhere: "", // 自定义条件
      };
       this.getDataList();
    },
      //读取列配置
        async getTableCols(){
        this.tableCols = []
        const res = await  GetTableColsData({InterID:"329"});
        this.tableCols=res.data;

        debugger
      //   this.spread[1].suspendPaint();
      // let sheet = this.spread[1].getActiveSheet();
      // sheet.options.allowCellOverflow = true;
      // sheet.defaults.rowHeight = 23;
      // sheet.defaults.colWidth = 100;
      // sheet.defaults.colHeaderRowHeight = 23;
      // sheet.defaults.rowHeaderColWidth = 60;
      // let colHeader1 = [];
      // let colInfos = [];
      // sheet.setDataSource(this.tableData);

        this.tableCols.forEach((x, y) => {
          debugger
        x['name'] = x['prop'];
        x['displayName'] = x['label'];
        x['width'] = parseInt(x.width);
        if (x.prop === 'isChecked') {
          // 选框
          sheet.setCellType(
            0,
            0,
            new HeaderCheckBoxCellType(),
            GCsheets.SheetArea.colHeader,
          );
          x.cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
        } else if (
          x.type === 'comboboxMultiple' ||
          x.type === 'combobox'
        ) {
          this.tableData[remarkTb].map((item, index) => {
            if (x.DataSourceID && x.DataSourceName) {
              let newData = item[x.DataSourceName]; // 设置列表每行下拉菜单
              // 获取要绑定下拉菜单的单元格对象
              let cell = sheet.getCell(index, y);
              // 创建下拉菜单单元格类型，并设置其选项数据
              let comboBox = new GC.Spread.Sheets.CellTypes.ComboBox();
              comboBox.editorValueType(
                GC.Spread.Sheets.CellTypes.EditorValueType.value,
              );
              comboBox.editable(true);
              // 获取下拉菜单的选项数据
              comboBox.items(newData);
              comboBox.itemHeight(24);
              // 将下拉菜单单元格类型绑定到指定的单元格中
              cell.cellType(comboBox);
            }
          });
        } else if (x.type === 'checkbox') {
          let cellType = new GC.Spread.Sheets.CellTypes.CheckBox();
          cellType.caption('');
          cellType.textTrue('');
          cellType.textFalse('');
          cellType.textIndeterminate('');
          cellType.textAlign(
            GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.center,
          );
          cellType.isThreeState(false);
          sheet.getCell(-1, y).cellType(cellType);
        } else if (
          x.DataType == 'datetime' ||
          x.DataType === 'varchar' ||
          x.DataType === 'nvarchar'||x.DataType === 'Input'
        ) {
          x.formatter = '@';
        }

        //行，start,end
        // if (x.isEdit) {
        //   sheet.getCell(-1, y).locked(false).foreColor("#2a06ecd9");
        // }
      });
debugger
      // sheet.bindColumns(this.tableCols); //此方法一定要放在setDataSource后面才能正确渲染列名
      // sheet.setRowCount(1, GC.Spread.Sheets.SheetArea.colHeader);
      // colHeader1.forEach(function (value, index) {
      //   sheet.setValue(0, index, value, GC.Spread.Sheets.SheetArea.colHeader);

      // });      
         },
        async getDataList() {
        const res = await getDataList({ data: JSON.stringify(this.Search) });
        this.tableData = res.data.Table;
        //将data 中的数据放到DataList中
        this.Search.total = res.data.Table1[0].RecordCount;
    
    },OpenFindForm() {
      //打开搜索框
      this.SearchDialog = true;
      //计算外边距
      console.log(this.$refs.searchDialog.offsetHeight);
      this.DialogBtnMargin = this.$refs.searchDialog.offsetHeight - 40;
    },
    handleOpenClose()
    {
        this.dialogVisible = false
    }, handlexportData() {
      funDownload("329", JSON.stringify(this.Search));
    }, handleIsfunEdit() {
      this.IsfunEdit=true;
    }, handleIsfunfail() {
       this.Isfunfail=true;
    },async handeAdd() {
      // 新建
    const result = await UpdateForm({ IsPostBack:false,billID:''});
     this.FormData=result.data1.Table[0];
     this.dialogType = 'edit'
        this.dialogVisible = true
        this.checkStrictly = true
      
        this.$nextTick(() => {
          const routes = this.generateRoutes(this.EditObj.routes)
          this.$refs.tree.setCheckedNodes(this.generateArr(routes))
          // set checked state of a node not affects its father and child nodes
          this.checkStrictly = false

        })
        this.getDataList();
    },
   async handleEdit(scope) {
      // 修改

      
    const result = await UpdateForm({ IsPostBack:false,billID:scope.row.IDXNO});
     this.FormData=result.data1.Table[0];
        this.dialogType = 'edit'
        this.dialogVisible = true
        this.checkStrictly = true
      
        this.$nextTick(() => {
          const routes = this.generateRoutes(this.EditObj.routes)
          this.$refs.tree.setCheckedNodes(this.generateArr(routes))
          // set checked state of a node not affects its father and child nodes
          this.checkStrictly = false

        })
        this.getDataList();
      
    },
     async handleSave(scope) {
      // 修改
      
    const result = await UpdateForm({ IsPostBack:true,billID:this.FormData.IDXNO, HeadDate: JSON.stringify(this.FormData)});
     this.FormData=result.data1.Table[0];
       
        if (result.code === 20000) {
         
       
          this.$notify({
            title: result.msg,
            dangerouslyUseHTMLString: true,
            message: "",
            type: "success",
          });
          this.getDataList();
        } else {
          this.$notify({
            title: result.msg,
            dangerouslyUseHTMLString: true,
            message: "",
            type: "error",
          });
        }
      
       
        this.getDataList();
      
    },delData({ $index, row }) {
       this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(async () => {
         

         this.tableData.splice($index, 1);

            const result = await DeletForm({
              billID: row.IDXNO,
              IsPostBack: false,
            });

            this.$message({
              type: "success",
              message: result.msg,
            });
          
        })
        .catch((err) => {
          console.error(err);
        });
    },
      
       
  }
}
</script>

<style lang="scss" scoped>

.app-container {
  .EditObjs-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 5px;
  }
}
.searchDialog ::v-deep .el-dialog__header {
  background: #409eff;
}
.searchDialog ::v-deep .el-dialog__title {
  color: #fff;
}
.searchDialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>